<template>
  <div>
    <t-dialog
      width="auto"
      class="dialog"
      placement="center"
      :header="false"
      :footer="false"
      :closeBtn="false"
      :visible.sync="visible"
      :close-on-overlay-click="false"
    >
      <div class="dialog-body">
        <div class="left">
          <div class="drawer-head">
            <h3>{{header}}</h3>
          </div>

          <div class="product-info">
            <h3>{{ productData.title }}</h3>
            <p v-if="productData.is_sn">SN: {{ productData.sn }}</p>
          </div>

          <t-form :data="formData" :rules="rules" ref="form" layout="inline" label-align="top" @submit="onSubmit">
            <!--<t-form-item style="width: 100%;margin-right: 0;">-->
            <!--  <template #label>-->
            <!--    <div class="flex align-center">-->
            <!--      <p class="form-label2">SN码产品</p>-->
            <!--    </div>-->
            <!--  </template>-->
            <!--</t-form-item>-->
            <t-form-item name="unit_price" style="width: 268px;">
              <template #label>
                <p class="form-label2">调拨价</p>
              </template>
              <t-input-number label="￥" v-model="formData.unit_price" theme="column" style="width: 100%;" :min="0" placeholder="0.00"></t-input-number>
            </t-form-item>
            <t-form-item name="quantity" style="width: 200px;margin-right: 18px;">
              <template #label>
                <p class="form-label2">数量</p>
              </template>
              <t-input-number v-model="formData.quantity" style="width: 100%;" :min="1" :max="productData.quantity" placeholder="请输入"></t-input-number>
            </t-form-item>
            <t-form-item name="remark" style="width: 268%;margin-right: 0;">
              <template #label>
                <p class="form-label2">备注</p>
              </template>
              <t-textarea v-model="formData.remark" :maxlength="50" placeholder="请输入备注" />
            </t-form-item>
          </t-form>
          <div class="footer-btn">
            <div>
              <t-button theme="danger" v-if="type === 'again'" variant="outline" @click="handleCancel">取消调拨</t-button>
            </div>
            <t-space size="8px">
              <t-button theme="primary" class="" @click="handleConfirm">确定</t-button>
              <t-button theme="default" class="" @click="close">取消</t-button>
            </t-space>
          </div>
        </div>
      </div>
    </t-dialog>
  </div>
</template>

<script>
import { IconFont } from "tdesign-icons-vue";
import {classifyListApi} from "@/api/classify";
import ConfigRight from "@/pages/warehouse/components/product-warehousing/config-right.vue";
import BatchSn from "@/pages/inventory/components/product-warehousing/batch-sn.vue";

export default {
  name: 'ProductConfig',
  components: {BatchSn, ConfigRight, IconFont},
  data() {
    return {
      visible: false,
      header: '填写调拨信息',
      confirmBtn: {
        text: '保存',
        theme: 'primary',
        loading: false
      },

      //isSN: 1, // 是否开启SN序列号
      productData: {}, // 产品数据

      formData: {
        title: '', // 产品标题
        product_id: '', // 产品ID
        quantity: '', // 数量
        is_sn: 1, // 开启SN序列号（0关闭；1开启）
        sn: '', // SN数据
        unit_price: '', // 含税单价（调拨价）
        remark: '', // 备注（50个字内）
        lists: [
          {
            title: '', // 产品标题
            product_id: '', // 产品ID
            quantity: '', // 数量
            is_sn: 1, // 开启SN序列号（0关闭；1开启）
            sn: '', // SN数据
            unit_price: '', // 含税单价（调拨价）
            remark: '', // 备注（50个字内）
          }
        ],
      },

      rules: {
        sn: [{ required: true, message: '请输入SN码', trigger: 'blur' }],
        unit_price: [{ required: true, message: '请输入调拨价', trigger: 'blur' }],
        quantity: [
          { required: true, message: '请输入数量', trigger: 'change' },
          { min: 1, message: '数量必须大于0', trigger: 'change' }
        ],
      },

      size: 'medium',
      tableLayout: false,
      stripe: false,
      bordered: false,
      hover: true,
      showHeader: true,
      columns: [
        {colKey: 'sn', title: 'title-slot-sn', width: 260 },
        {colKey: 'unit_price', title: '调拨价', width: 160 },
        {colKey: 'remark', title: '备注', width: 220 },
        {colKey: 'option', title: '操作', fixed: 'right', width: 80},
      ],

      maxHeight: 260,
      loading: false,
      type: 'first',
    }
  },
  methods: {
    // 取消调拨
    handleCancel() {
      this.$emit('cancel', [], this.productData.id)
      this.close();
    },
    // 确认调拨
    handleConfirm() {
      this.$refs.form.submit()
    },
    onSubmit({ validateResult, firstError }) {
      if (validateResult === true) {
        let params = [
          {
            cId: this.uuid(24),
            title: this.productData.title, // 产品标题
            product_id: this.productData.product_id, // 产品ID
            count: this.productData.quantity,
            quantity: this.formData.quantity, // 数量
            is_sn: this.productData.is_sn, // 开启SN序列号（0关闭；1开启）
            sn: this.productData.sn, // SN数据
            unit_price: this.formData.unit_price, // 含税单价（调拨价）
            remark: this.formData.remark, // 备注（50个字内）
          }
        ]
        console.log('params', params)
        this.$emit('confirm', params, this.productData.id)
        this.close();
      } else {
        this.$message.error(firstError);
      }
    },
    open(row, config) {
      this.visible = true
      this.productData = row
      console.log('config', config)

      if (config) {
        this.type = 'again'
        this.formData = {
          title: this.productData.title, // 产品标题
          product_id: this.productData.product_id, // 产品ID
          count: this.productData.quantity,
          quantity: config[0].quantity, // 数量
          is_sn: config[0].is_sn, // 开启SN序列号（0关闭；1开启）
          sn: this.productData.sn, // SN数据
          unit_price: config[0].unit_price, // 含税单价（调拨价）
          remark: config[0].remark, // 备注（50个字内）
        }
      } else {
        this.type = 'first'
        this.formData = {
          title: this.productData.title, // 产品标题
          product_id: this.productData.product_id, // 产品ID
          count: this.productData.quantity,
          quantity: '', // 数量
          is_sn: this.productData.is_sn, // 开启SN序列号（0关闭；1开启）
          sn: this.productData.sn, // SN数据
          unit_price: '', // 含税单价（调拨价）
          remark: '', // 备注（50个字内）
        }
      }
      this.$refs.form.reset()

      console.log('productData', this.productData)
      console.log('formData', this.formData)
    },
    close() {
      this.visible = false
    },
    uuid(len) {
      var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
      var uuid = [],
        i;
      if (len) {
        for (i = 0; i < len; i++) {
          uuid[i] = chars[0 | Math.random() * chars.length];
        }
      } else {
        var r;
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
        uuid[14] = '4';
        for (i = 0; i < 36; i++) {
          if (!uuid[i]) {
            r = 0 | Math.random() * 16;
            uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
          }
        }
      }
      return uuid.join('');
    },
  }
}
</script>

<style lang="less" scoped>

/deep/ .t-form__controls {
  min-height: 0;
}

/deep/ .t-form__controls-content {
  min-height: 0;
}

/deep/ .dialog {

  .t-dialog--default {
    padding: 0;

    .t-dialog__body {
      padding: 0;
    }
  }
}

.dialog-body {
  display: flex;
}

.form-label2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 22.4px;
  color: #000000E5;
}

.label-hint {
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  padding-left: 8px;
  padding-right: 8px;
  color: var(--td-font-gray-2);
}

/deep/ .t-dialog__body {
  margin: 0 !important;
}

/deep/ .dialog-body {

  .t-input.t-size-l {
    min-height: 40px !important;
  }

  .t-input-number.t-size-l .t-input {
    font-size: 17px;
    min-height: 40px;
  }

  .t-input {
    //background-color: #FFFFFF !important;
  }

}


/deep/ .left {
  position: relative;
  width: 890px;
  padding: 32px 24px;
  padding-bottom: 24px;
  box-sizing: border-box;


  .drawer-head {
    color: black;
  }

  .product-info {
    padding: 12px;
    margin-top: 12px;
    margin-bottom: 24px;
    background-color: #F9F9F9;
    border-radius: var(--td-radius-medium);

    h3 {
      font-size: 16px;
      font-weight: 600;
      line-height: 22.4px;
      text-align: left;
      color: #000000;
    }

    p {
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      text-align: left;
      color: #000000E5;
    }
  }
}


.footer-btn {
  width: 100%;
  display: flex;
  padding-top: 24px;
  align-items: center;
  justify-content: space-between;
}

.danger-btn {
  width: 112px;
  height: 40px;
  border-radius: var(--td-radius-medium);
}

.confirm-btn {
  width: 82px;
  height: 42px;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  border-radius: var(--td-radius-medium);
}

.cancel-btn {
  width: 82px;
  height: 42px;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  background-color: #B8B8B8;
  border-radius: var(--td-radius-medium);
}

.cancel-btn2 {
  width: 82px;
  height: 42px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  border-radius: var(--td-radius-medium);
}
</style>
